<%@page language="java" pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ include file="../../common.jsp"%>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/statics/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/statics/css/style.css">
    <link rel="stylesheet" href="${ctx}/statics/css/font-awesome.min.css">
    <style>
        #box {
            margin: 20px auto;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 30px 50px 0px 0px;
        }
    </style>
</head>
<body>
<h2>ADD</h2>
<div id="box">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
</div>
<script src="${ctx}/statics/layui/layui.all.js"></script>
<script>
    var upload = layui.upload;
    var $ = layui.jquery;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#test1'
        ,accept: 'images'
        ,size: 3000
        ,url: 'upload' //改成您自己的上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code == 0){
                /*绑定文件名到隐藏的字段*/
                $("#photo").val(res.filename);
                layer.msg('上传成功',{icon: 1});
            }
            //上传成功
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });
</script>
</body>
</html>
